<template>
	<view class="count poRel">
		<view class="poFix wid100" style="background: #e9ffe4;top: 0;z-index: 11;">
			<!-- 状态栏高度 -->
			<view :style="{ height: `${statusBarHeight}px` }"></view>
			<!-- 自定义导航栏高度 并 居中 -->
			<view class="dis disAl disJuC poRel" :style="{height: `${barHeight}px`}">
				<view class="poAbs" style="width: 32rpx;height: 32rpx;left: 22rpx;" @click="fanhui()">
					<image src="../../../static/fanhui.png" class="wh100"></image>
				</view>
				<view class="foSi35" style="line-height: 36rpx;">兑换中心</view>
			</view>
		</view>
		<view :style="{ height: `${statusBarHeight+barHeight}px` }"></view>
		<view class="wid100" style="height: 360rpx;">
			<image :src="urlImage+'/wechatimg/zhuanwei1.png'" class="wh100"></image>
		</view>
		<view class="wid90 mar borRad30 mar-top40 bacFFF" style="box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.2);">
			<view class="wid90 mar dis disAl disJuC" style="height: 140rpx;">
				<view class="foSi35 fowe800">兑换码：</view>
				<view class="hei80 wid70 dis disAl" style="border-bottom: 1px solid #A6A6A6;">
					<input class="textCen foSi30 wid100" v-model="code" placeholder="请输入兑换码" />
				</view>
			</view>
		</view>
		<view class="dis disAl disJuC mar-top30">
			<view @click="go({url:'/yb_wm/my/redeem/redeemList'})" class="dis disAl foSi22" style="color: #9D9D9D;">
				<view style="margin-right: 6rpx;">兑换记录</view>
				<uni-icons type="right" size="22rpx" color="#9D9D9D"></uni-icons>
			</view>
		</view>
		<view class="wid100 poFix" style="bottom: 50rpx;" @click="duihuan()">
			<view class="wid90 mar dis disAl disJuC coFFF borRad60"  :style='{background:tColor}' style="height: 94rpx;">立即兑换</view>
		</view>
		<mg-popup v-model="showwc" position="middle" :z-index="5000">
			<view class="mar" style="width: 540rpx;height: 522rpx;box-sizing: border-box;background-size: 100% 100%;"
				:style="'background-image: url('+urlImage+'/wechatimg/bg.png);'">
				<view style="height: 130rpx;"></view>
				<view class="textCen fowe800 foSi50" style="color: #FC2B24;">恭喜您兑换成功！</view>
				<view class="textCen mar-top20 foSi25" style="color: #A3A3A3;">超多优惠福利早知道！</view>
				<view style="height: 120rpx;"></view>
				<view class="hei60 dis disAl disJuC wid80 mar borRad40 foSi30 fowe600" @click="showwc = false" style="color: #FC2B24;background-color: #FBD09F;">我知道了</view>
			</view>
			<view class="mar mar-top30 dis disAl disJuC">
				<image src="../../../static/guanbi1.png" @click="showwc = false"
					style="width: 38rpx;height: 38rpx;"></image>
			</view>
		</mg-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import utils from '@/common/utils';
	import mgPopup from '@/components/common/popup.vue'
	export default {
		name: 'redeemList',
		components: {
			mgPopup
		},
		data() {
			return {
				statusBarHeight: 0,
				barHeight: 0,
				code: '',
				showwc: false
			}
		},
		async onLoad() {
			// 状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// 胶囊数据
			const {top,height} = wx.getMenuButtonBoundingClientRect();
			// 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38
			this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
		},
		onShow() {},
		methods: {
			async duihuan(){
				let data = await this.util.request({
					'url': this.api.dhmdh,
					data: {
						codes: this.code
					}
				})
				// this.list = data
				console.log(data)
				if(data){
					this.showwc = true
					// this.go({url:'/yb_wm/my/redeem/redeemList'})
				}
			},
			fanhui(){
				uni.navigateBack(1)
			}
		},
	}
</script>
<style scoped lang="scss">
	.count {
		min-height: 100vh;
		background-color: #F6F6F6;
	}
</style>